<template>
  <div>
    <headerMidder title="编辑资料"></headerMidder>
    <div class="avatar">
      <img class="avatar-img" :src="profile.head_img" alt />
      <!-- 编辑头像组件 -->
      <!-- after-read 在选择完图片之后会被触发 -->
      <van-uploader :after-read="afterRead" class="fileUploader" />
    </div>
    <cellBar label="昵称" :desc="profile.nickname" @jump="isShowNickname=true" />
    <cellBar label="密码" desc="*****" @jump="isShowPsw=true" />
    <cellBar label="性别" :desc="profile.gender" @jump="isShowGender=true" />

    <!-- 这里是放组件得地方,并不是实际显示的位置,显示的时候,弹窗的样式有组件库控制 -->
    <!-- v-model 控制是否显示
        title 控制标题
        show-cancel-button 控制是否显示取消按钮 
    confirm 是点击确认按钮事件-->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      type="text"
      show-cancel-button
      @confirm="editProfile({nickname: newNickname})"
    >
      <!-- 这里是插入输入框 -->
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>

    <!-- 编辑密码弹窗 -->
    <van-dialog
      v-model="isShowPsw"
      title="修改密码"
      type="text"
      show-cancel-button
      @confirm="editProfile({password: newPwd})"
    >
      <!-- 这里是插入输入框 -->
      <van-field type="password" v-model="newPwd" placeholder="请输入密码" />
    </van-dialog>

    <!-- 性别编辑组件 -->
    <!-- 上拉菜单组件 -->
    <!-- v-model 是否显示
        actions 是一个数组,存放着所有选项
    selectt 是选择后的回调函数处理-->
    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="selectGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import headerMidder from "../components/headerMidder";
import cellBar from "../components/cellBar";
export default {
  components: {
    headerMidder: headerMidder,
    cellBar: cellBar
  },

  data() {
    return {
      isShowPsw: false,
      isShowNickname: false,
      isShowGender: false,
      newNickname: "",
      newPwd: "",
      genderList: [
        {
          name: "男"
        },
        {
          name: "女"
        }
      ],
      profile: {}
    };
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("user_id"),
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        this.profile = res.data.data;
        console.log("这里是profile" + this.profile);

        if (!this.profile.head_img) {
          // 如果数据库没有头像,强行设置一个默认的
          this.profile.head_img = "/static/imgs/avatar.jpg";
        } else {
          // 如果有头像数据,我们还要拼接数据库基准路径才能获取到头像真正地址
          this.profile.head_img =
            this.$axios.defaults.baseURL + this.profile.head_img;
        }

        this.profile.gender = this.profile.gender == 0 ? "小姐姐" : "小哥哥";
      });
    },
    selectGender(item) {
      console.log("你选择了" + item.name);
      this.editProfile({
        gender: item.name == "男" ? 1 : 0
      });
      this.isShowGender = false;
    },

    afterRead(fileItem) {
      //  这里是选择完图片后的回调方法,我们想要的图片就在 fileItem.file
      // 只需要将这个问天转换成 api 要求的二进制形式,发送 ajax 请求即可
      // 我们使用一个对象 FormData 将数据转换为二进制形式
      const data = new FormData();
      data.append("file", fileItem.file);
      
      this.$axios({
        url: "/upload",
        method: "post",
        data: data,
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // },
      }).then(res => {
        console.log("这里是找图片的" + res.data);

        this.editProfile({
          // 调用 editProfile 方法 修改 head_img
          head_img: res.data.data.url
        });
      });
    },

    editProfile(newData) {
      console.log('点击了确认按钮');
      
      this.$axios({
        url: "/user_update/" + localStorage.getItem("user_id"),
        method: "post",
        headers: {
          Authorization: localStorage.getItem("token")
        },
        //  data:{
        //    nickname:this.newNickname
        //  }
        data: newData
      }).then(res => {
        console.log(res.data);
        this.loadPage();
      });
    }
  },

  mounted() {
    this.loadPage();
  }
};
</script>

<style lang='less' scoped>
.avatar {
  padding: 8.333vw;
  text-align: center;
  position: relative;
}
.avatar-img {
  width: 19.444vw;
  border-radius: 50%;
}
.fileUploader {
  position: absolute;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
}
</style>